<!--
 * @Author: malgee
 * @Date: 2025-04-23 11:10:40
 * @LastEditors: maling
 * @LastEditTime: 2025-04-23 15:12:35
 * @FilePath: /vue3-ts-cms/src/views/login/cpns/login-panel.vue
 * @Description: 
 * 
-->
<template>
  <div class="login-panel">
    <h1 class="title">后台管理系统</h1>
    <el-tabs stretch v-model="currentTab">
      <el-tab-pane label="账号密码登录" name="account">
        <account-panel ref="accountPanelRef"></account-panel>
      </el-tab-pane>
      <el-tab-pane label="手机号登录" name="phone">
        <phone-panel ref="phonePanelRef"></phone-panel>
      </el-tab-pane>
    </el-tabs>
    <div class="login-panel-footer">
      <el-checkbox>记住密码</el-checkbox>
      <el-link type="primary">忘记密码</el-link>
    </div>
    <el-button class="login-button" type="primary" @click="handleLogin">登录</el-button>
  </div>
</template> 

<script setup lang="ts">
import { ref } from 'vue'
import accountPanel from './login-panel-account.vue'
import phonePanel from './login-panel-phone.vue'

const accountPanelRef = ref<InstanceType<typeof accountPanel>>()
const phonePanelRef = ref<InstanceType<typeof phonePanel>>()
const currentTab = ref('account')  // 默认选中账号密码登录

const handleLogin = () => {
  if (currentTab.value === 'account') {
    // 账号密码登录
    accountPanelRef.value?.loginAction(true)
  } else {
    // 手机号登录
    // phonePanelRef.value?.loginAction()
  }
}



</script>

<style scoped lang="less">
.title {
  text-align: center;
  font-size: 24px;
  color: #333;
}
.login-panel-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}
.login-button {
  width: 100%;
  margin-top: 20px;
}
</style>